$(document).ready( function() {
    $(".value").each( function(i) {
	setClickable(this, i, this.parentNode.id);
    });
});

function setClickable(obj, i, pid) {
    $(obj).click( function() {
	var input = '<div><input type="text" value="'+$(this).html()+'" />';
	var button = '<input type="button" value="Save" class="saveButton" /> or <input type="button" value="Cancel" class="cancelButton" /></div>';
	var revert = $(obj).html();
    
	$(obj).after(input+button).remove();
	$('.saveButton').click(function() { saveChanges(this, false, i, pid); });
	$('.cancelButton').click(function() { saveChanges(this, revert, i, pid); });
    })

    .mouseover (function() {
	$(this).addClass("editable");
    })

    .mouseout (function() {
	$(this).removeClass("editable");
    });
}

function saveChanges(obj, cancel, n, pid) {
    if (!cancel) {
	var t = $(obj).siblings(0).val();
	$.post(this.location.pathname+"partial_save/", 
	       {content: t, pid: pid,}
	       );
    } else {
	var t = cancel;
    }
    if (t == '') t = '(click to add text)';
    $(obj).parent().after('<span class="value">'+t+'</span>').remove();
    setClickable($(".value").get(n), n);
}
